<template>
  <Card :bordered="false">
    <BasicForm @register="registerForm" />

    <div class="flex-row-center-space" style="margin: 10px 0">
      <RadioGroup button-style="solid" v-model:value="orderStatus" @change="handleRadioChange">
        <RadioButton v-for="item in orderStatusList" :key="item.value" :value="item.value">
          {{ item.label }}
        </RadioButton>
      </RadioGroup>
      <div style="padding-right: 25px">
        <Button :type="'primary'" @click="fetch">查询</Button>
        <Button style="margin-left: 15px" @click="handleReset">重置</Button>
      </div>
    </div>

    <Spin :spinning="spinning">
      <div v-if="!pagination.total" style="padding: 100px 0"><Empty /></div>
      <div v-else class="flex-col">
        <OrderItem
          style="margin-bottom: 10px"
          v-for="(item, index) in dataSource"
          :key="index"
          :data-source="item"
          @change-price-success="fetch"
        />
      </div>
    </Spin>

    <div style="margin-top: 20px" class="flex-row-center-end">
      <Pagination
        show-size-changer
        :total="pagination.total"
        :show-total="(total) => `共 ${total} 条`"
        v-model:current="pagination.current"
        v-model:pageSize="pagination.pageSize"
        @change="fetch"
        @show-size-change="fetch"
      />
    </div>
  </Card>
</template>

<script setup lang="ts">
  import { tableFormSchema } from './data';
  import mcApi from 'mc-c2b2m-operator-api';
  import { onActivated, reactive, ref } from 'vue';
  import OrderItem from './components/OrderItem.vue';
  import { PaginationProps } from '@/components/Table';
  import { BasicForm, useForm } from '@/components/Form';
  import { SalesOrderModel } from 'mc-c2b2m-operator-api/types/order';
  import { OrderStatusEnum, orderStatusList } from '@/enums/orderEnum';
  import { Card, Spin, Empty, Button, RadioGroup, RadioButton, Pagination } from 'ant-design-vue';
  import { useTableAction } from '@/hooks/web/useTableAction';

  const { OrderModule } = mcApi;
  const { SalesOrderApi } = OrderModule;
  const { handleFetchDateParams } = useTableAction();

  const [registerForm, { getFieldsValue, resetFields }] = useForm({
    labelWidth: 100,
    schemas: tableFormSchema,
    baseColProps: { span: 22 },
    showActionButtonGroup: false,
  });

  const spinning = ref<boolean>(false);
  const orderStatus = ref<OrderStatusEnum>(OrderStatusEnum.ALL);
  const pagination = reactive<PaginationProps>({
    total: 0,
    current: 1,
    pageSize: 10,
  });
  const dataSource = ref<SalesOrderModel[]>([]);

  onActivated(() => {
    fetch();
  });

  async function handleReset() {
    pagination.current = 1;
    pagination.pageSize = 10;
    orderStatus.value = OrderStatusEnum.ALL;
    await resetFields();
    await fetch();
  }
  function handleRadioChange() {
    pagination.current = 1;
    fetch();
  }
  async function fetch() {
    try {
      spinning.value = true;
      const values = getFieldsValue();
      handleFetchDateParams(values);
      const { current, pageSize } = pagination;
      const model = {
        ...values,
        pageSize,
        pageNo: current || 1,
        desc: 'cso.created_time',
        status: orderStatus.value,
      };
      const result = await SalesOrderApi.getSalesOrderPage(model);
      const { items, total } = result || {};
      pagination.total = total || 0;
      dataSource.value = items || [];
    } finally {
      spinning.value = false;
    }
  }
</script>
<script lang="ts">
  export default {
    name: 'SalesOrder',
  };
</script>

<style scoped lang="less"></style>
